<!DOCTYPE html>
<html>
<head>
    <title>Direct API Test</title>
</head>
<body>
    <h1>Direct API Test</h1>
    <button onclick="testDirect()">Test Direct to 8002</button>
    <button onclick="testProxy()">Test Through Proxy</button>
    <div id="result"></div>

    <script>
    async function testDirect() {
        const result = document.getElementById('result');
        result.innerHTML = 'Testing direct connection to 8002...';

        try {
            const response = await fetch('http://localhost:8002/api/v1/ai/generate-hints', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    topic: 'Direct Test',
                    purpose: 'audience'
                })
            });

            const data = await response.json();
            result.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
        } catch (error) {
            result.innerHTML = 'Error: ' + error.message;
        }
    }

    async function testProxy() {
        const result = document.getElementById('result');
        result.innerHTML = 'Testing through proxy...';

        try {
            const response = await fetch('/api/v1/ai/generate-hints', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    topic: 'Proxy Test',
                    purpose: 'audience'
                })
            });

            const data = await response.json();
            result.innerHTML = '<pre>' + JSON.stringify(data, null, 2) + '</pre>';
        } catch (error) {
            result.innerHTML = 'Error: ' + error.message;
        }
    }
    </script>
</body>
</html>